const chatFun = {
	data() {
		return {
			//showChat:false,
			tLeft: 0, 
			tTop: 0,
			dragging: false, //是否拖放
			resizing: false, //是否缩放
			showResize: false, //是否可以resize
			resizeType: 0, //缩放类型
			eleWidth:800, //当前宽度
			minWidth: 480, //最小宽度
			minHeight: 360, //最小高度
			minLeft: 0, 
			minTop: 0,
			maxLeft:0,
			maxRight:0,
			el:'', //拖拽元素
			resizeX:4, //触发缩放的范围
			resizeY:4  
		}
	},
	filters: {

	},
	beforeDestroy() {
		
	},
	watch: {

	},
	mounted() {
		let _this = this;
		document.documentElement.onmousemove = (e) => {
			this.handleMousemove(e);
		}
		document.documentElement.onmousedown = (e) => { 
			this.handleMousedown(e);
		};
		document.documentElement.onmouseup = (e) => {
			_this.handleMouseup(e);
		};
	},
	methods: {
		handleMousemove(e){
			// e.preventDefault();
			e.stopPropagation();
			if(!this.resizing && !this.dragging ){
				let chatRooms = document.getElementsByClassName('chatRoom');
				for(let i=0; i<chatRooms.length;i++) {
					let el = chatRooms[i];
					let pos = el.getBoundingClientRect();
					let x = e.clientX - pos.left;
					let y = e.clientY - pos.top;
					if(x > -4 && y > -4 && x < pos.width+4 && y < pos.height+4){
						this.el = el;
					}
				}
			}
			if(this.el){
				if(this.dragging){
					this.drag(e);
				}else if(this.resizing){
					this.resize(e)
				}else{
					this.showResizeCursor(e)
				}
			}
		},
		handleMousedown(e){
			e.stopPropagation();
			if(this.showResize) {
				this.resizing = true;
			}else if(e.target.id == 'curChat' || e.target.classList.contains('chatType')) {
				this.dragDetail(e);
			}
		},
		handleMouseup(e){
			this.resizing = false;
			this.allowDrop(e);
		},
		showResizeCursor(e){
			let winWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
			let winHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
			let ele = this.el;
			let pos = ele.getBoundingClientRect();
			let left = e.clientX - pos.left;
			let top = e.clientY - pos.top;
			let eleHeight = ele.offsetHeight;
			let eleWidth = ele.offsetWidth;
			let resizeLeft = left > -4 && left < 4;
			let resizeRight = left > eleWidth - 4 && left < eleWidth + 4;
			let resizeBottom = top > eleHeight - 4 && top < eleHeight + 4;
			let resizeTop = top > -4 && top < 4;
			if(resizeLeft && resizeTop) {
				document.body.style.cursor = "se-resize";
				this.resizeType = 1;
				this.showResize = true;
				this.maxLeft = pos.right - this.minWidth;
				this.minLeft = 0;
				this.maxTop = pos.bottom - this.minHeight;
				this.minTop = 0;
			} else if(resizeRight && resizeBottom) {
				document.body.style.cursor = "se-resize";
				this.resizeType = 2;
				this.showResize = true;
				this.minLeft = pos.left + this.minWidth;
				this.maxRight = winWidth;
				this.minTop = pos.top + this.minHeight;
				this.maxTop = winHeight;
			} else if(resizeRight && resizeTop) {
				document.body.style.cursor = "ne-resize";
				this.resizeType = 3;
				this.showResize = true;
				this.minLeft = pos.left + this.minWidth;
				this.maxRight = winWidth;
				this.maxTop = pos.bottom - this.minHeight;
				this.minTop = 0;
			} else if(resizeLeft && resizeBottom) {
				document.body.style.cursor = "ne-resize";
				this.resizeType = 4;
				this.showResize = true;
				this.maxLeft = pos.right - this.minWidth;
				this.minLeft = 0;
				this.minTop = pos.top + this.minHeight;
				this.maxTop = winHeight;
			} else if(resizeLeft) {
				document.body.style.cursor = "e-resize";
				this.resizeType = 5;
				this.showResize = true;
				this.maxLeft = pos.right - this.minWidth;
				this.minLeft = 0;
			} else if(resizeRight) {
				document.body.style.cursor = "e-resize";
				this.resizeType = 6;
				this.showResize = true;
				this.minLeft = pos.left + this.minWidth;
				this.maxRight = winWidth;
			} else if(resizeTop) {
				document.body.style.cursor = "n-resize";
				this.resizeType = 7;
				this.showResize = true;
				this.maxTop = pos.bottom - this.minHeight;
				this.minTop = 0;
			} else if(resizeBottom) {
				document.body.style.cursor = "n-resize";
				this.resizeType = 8;
				this.showResize = true;
				this.minTop = pos.top + this.minHeight;
				this.maxTop = winHeight;
			} else {
				document.body.style.cursor = "auto";
				this.resizeTypee = 0;
				this.showResize = false;
				this.minTop = 0;
				this.maxTop = 0;
				this.minLeft = 0;
				this.maxLeft = 0;
			}
		},
		dragDetail(ev) {
			this.dragging = true;
			let pos = this.el.getBoundingClientRect()
			this.tLeft = ev.clientX - pos.left; //鼠标按下时和选中元素的坐标偏移:x坐标
			this.tTop = ev.clientY - pos.top;
		},
		allowDrop(ev) {
			this.dragging = false;
			if(this.el) {
				this.el.style.boxShadow = '0 0 30px #ccc';
			}
		},
		drag(ev){
			let ele = this.el;
			let left = ev.clientX - this.tLeft;
			let top = ev.clientY - this.tTop;
			let eleHeight = ele.offsetHeight;
			let eleWidth = ele.offsetWidth;
			let minLeft = 0;
			let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
			let maxLeft = width - ele.offsetWidth;
			let minTop = 0;
			let height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
			let maxTop = height - ele.offsetHeight;
			ele.style.boxShadow = "0px 0px 30px #000";
			if(left <= minLeft) {
				left = minLeft;
			}else if(left >= maxLeft) {
				left = maxLeft;
			}
			if(top <= minTop) {
				top = minTop;
			}else if(top >= maxTop) {
				top = maxTop;
			}
			ele.style.left = left + 'px';
			ele.style.top = top < 0 ? 0 : top  + 'px';
		},
		resize(ev){
			let ele = this.el;
			let winWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
			let winHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
			let pos = ele.getBoundingClientRect();
			let left = ev.clientX - pos.left;
			let top = ev.clientY - pos.top;
			let eleHeight = ele.offsetHeight;
			let eleWidth = ele.offsetWidth;
			if(this.resizeType == 5 || this.resizeType == 1 || this.resizeType == 4) { //往左放大，往右缩小
				let curLeft = pos.left + left;
				if(curLeft > this.minLeft && curLeft < this.maxLeft){
					ele.style.left = curLeft + 'px';
					ele.style.width = (eleWidth - left) + 'px';
				}
			} 
			if(this.resizeType == 6 || this.resizeType == 2 || this.resizeType == 3) { //往左缩小，往右放大
				ele.style.width = left < this.minWidth ? this.minWidth : left + 'px';
			} 
			if(this.resizeType == 7 || this.resizeType == 1 || this.resizeType == 3) { //往上放大，往下缩小
				let curTop = pos.top + top;
				if(curTop > this.minTop && curTop < this.maxTop){
					ele.style.top = curTop + 'px';
					ele.style.height = eleHeight - top + 'px';
				}
			}
			if(this.resizeType == 8|| this.resizeType == 2 || this.resizeType == 4) { //往下放大，往上缩小
				let maxHeight = winHeight - pos.top;
				ele.style.height = top < this.minHeight ? this.minHeight : top > maxHeight ? maxHeight : top + 'px';
			} 
			this.eleWidth = eleWidth;
		}
	}
}
export default chatFun